<template>
	<view class="container">
		<u-toast ref="uToast"></u-toast>
		<view class="source" v-if="store.base_url">
			<view class="header">
				<view class="title">选择喜欢的动漫模式</view>
			</view>
			<u-scroll-list>
				<view class="lists">
					<view :class="active == 0?'item active':'item'" @click="onActive(0)">
						<view class="image">
							<u--image radius="5" :showLoading="true"
								:src="store.base_url+'/assets/api/source/391a0b5533e3adbcdc040253392fc7e4.jpeg'"
								width="80px" height="80px"></u--image>
						</view>
						<view class="title">头像日漫风</view>
					</view>
					<view :class="active == 1?'item active':'item'" @click="onActive(1)">
						<view class="image">
							<u--image radius="5" :showLoading="true"
								:src="store.base_url+'/assets/api/source/8fd21507ac20223c0b51332ddcb9e424.jpeg'"
								width="80px" height="80px"></u--image>
						</view>
						<view class="title">全身日漫风</view>
					</view>
					<view :class="active == 2?'item active':'item'" @click="onActive(2)">
						<view class="image">
							<u--image radius="5" :showLoading="true"
								:src="store.base_url+'/assets/api/source/08eca9e5b0bcd3691e2f93db0ab87b21.jpeg'"
								width="80px" height="80px"></u--image>
						</view>
						<view class="title">全身港漫风</view>
					</view>
					<view :class="active == 3?'item active':'item'" @click="onActive(3)">
						<view class="image">
							<u--image radius="5" :showLoading="true"
								:src="store.base_url+'/assets/api/source/f6fc39c2fc24164d60500ae89b0648ed.jpeg'"
								width="80px" height="80px"></u--image>
						</view>
						<view class="title">复古漫画风</view>
					</view>
					<view :class="active == 4?'item active':'item'" @click="onActive(4)">
						<view class="image">
							<u--image radius="5" :showLoading="true"
								:src="store.base_url+'/assets/api/source/272714668403eef6f4c0be76d898f700.jpeg'"
								width="80px" height="80px"></u--image>
						</view>
						<view class="title">萌漫风</view>
					</view>
				</view>
			</u-scroll-list>
		</view>
		<!-- 预览/生成 -->
		<view class="preview">
			<view class="cover" v-if="file.file_path">
				<u--image radius="15" :showLoading="true" :src="file.file_path" width="360rpx" height="370rpx">
				</u--image>
			</view>
			<view class="cover" v-else>
				<u--image radius="15" :showLoading="true" :src="cover" width="360rpx" height="370rpx"></u--image>
			</view>
			<view class="upload" @click="onChooseImage" v-if="!file_id">
				<u-button shape="circle" color="#F22E38" iconColor="#fff" icon="edit-pen" text="点击上传图片"></u-button>
			</view>
			<view class="upload" @click="onChooseImage" v-else>
				<u-button shape="circle" color="#F22E38" iconColor="#fff" icon="reload" text="重新上传图片"></u-button>
			</view>
			<view class="tags" v-if="file.file_id">
				<button class="u-reset-button" showMessageCard :sendMessageImg="file_path"
					sendMessageTitle="请帮我把这张图转换成红包封面吧~!么么哒" open-type="contact">
					<u-tag text="一键转封面" size="mini" type="error"></u-tag>
				</button>
			</view>
		</view>
		<!-- 生成按钮 -->
		<view class="btn-action" v-if="game.cartoon">
			<view class="btn-group">
				<view class="btn rand">
					<u-button open-type="share" icon="share" color="#dd6161" :plain="true" shape="circle" text="分享好友">
					</u-button>
				</view>
				<view class="btn start" @click="onSubmit">
					<button class="btn-normal">
						<view class="title">立即创作</view>
						<view class="small">创作一次将消耗{{ game.cartoon.coin }}金币</view>
					</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		config
	} from '@/api/system.js';
	import {
		upload
	} from '@/api/system.js';
	import {
		cartoon
	} from '@/api/game.js';
	import {
		detail
	} from '@/api/user.js';
	export default {
		data() {
			return {
				active: 0,
				cover: '',
				store: {},
				file: {},
				file_id: '',
				game: {},
				share: {},
				userInfo: {},
				cartoon_type: ['jpcartoon_head', 'jpcartoon', 'hkcartoon', 'classic_cartoon', 'tccartoon']
			};
		},
		onLoad() {
			this.getStore()
			this.getGame()
			this.getShare()
			this.getUser()
		},
		onShareTimeline() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.user_id) {
				referee_id = _this.userInfo.user_id
			}
			return {
				imageUrl: _this.share.cover,
				title: "@" + _this.share.title,
				path: '/pages/main/index/index?referee_id=' + referee_id
			}
		},
		onShareAppMessage() {
			let _this = this
			let referee_id = ''
			if (_this.userInfo.user_id) {
				referee_id = _this.userInfo.user_id
			}
			return {
				imageUrl: _this.share.cover,
				title: "@" + _this.share.title,
				path: '/pages/main/index/index?referee_id=' + referee_id
			}
		},
		methods: {
			getUser() {
				detail({}).then(res => {
					this.userInfo = res.data.userInfo
				}).catch(err => {

				})
			},
			getShare() {
				config({
					key: 'share'
				}).then(res => {
					this.share = res.data.config
				}).catch(err => {

				})
			},
			onChooseImage() {
				let _this = this
				uni.chooseImage({
					count: 1, //默认9
					success: function(res) {
						uni.showLoading({
							title: '上传中...'
						})
						_this.afterRead(res.tempFilePaths[0])
					}
				});
			},
			async afterRead(file) {
				let _this = this
				let result = await upload({
					file: file
				}).then(result => {
					return result;
				}).catch(err => {
					uni.hideLoading()
				})
				_this.file_id = result.file_id
				_this.cover = result.file_path
				_this.file = {}
				_this.$refs.uToast.show({
					type: 'success',
					message: "已上传，开始你的创作吧~！",
					complete() {}
				})
				uni.hideLoading()
			},
			onSubmit() {
				let _this = this
				uni.showModal({
					title: "温馨提示",
					content: "是否确认消耗" + this.game.cartoon.coin +
						"金币进行AI创作？",
					success: (res) => {
						if (res.confirm) {
							uni.showLoading({
								title: 'AI创作中...'
							})
							// 执行转换
							cartoon({
								file_id: _this.file_id,
								type: _this.cartoon_type[_this.active]
							}).then(res => {
								uni.hideLoading()
								if (res.code == 1) {
									_this.file = res.data
									_this.$refs.uToast.show({
										type: 'success',
										message: "长按图片即可保存~！",
										complete() {}
									})
								}
							}).catch(err => {
								uni.hideLoading()
							})
						}
					},
				})
			},
			onActive(value) {
				this.active = value
			},
			getStore() {
				let _this = this;
				config({
					key: 'store'
				}).then(res => {
					_this.store = res.data.config
					_this.cover = _this.store.base_url + '/assets/api/source/552aef6f9b5a33e64760a07eb54f4052.jpeg'
					uni.setNavigationBarTitle({
						title: _this.store.name
					})
				}).catch(err => {

				})
			},
			getGame() {
				let _this = this;
				config({
					key: 'game'
				}).then(res => {
					_this.game = res.data.config
				}).catch(err => {

				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.btn-action {
		width: 90%;
		position: fixed;
		bottom: 120rpx;
		left: 4%;
		height: 120rpx;

		.btn-group {
			display: flex;
			flex-direction: row;
			justify-content: space-between;

			.rand {
				width: 40%;

				.u-button {
					height: 100rpx;
				}
			}

			.start {
				width: 55%;

				.btn-normal {
					height: 100rpx;
					line-height: normal;
					font-size: 28rpx;
					border-radius: 50rpx;
					background-color: #f22e38;
					border: none;
					color: #f4f4f5;
					display: flex;
					flex-direction: column;
					justify-content: center;
					box-shadow: 3rpx 3rpx 10rpx #dd6161;

					.title {
						font-weight: bolder;
					}

					.small {
						font-size: 24rpx;
					}
				}

				.btn-normal::after {
					border: initial;
				}
			}
		}
	}

	.preview {
		width: 50%;
		margin: 0 auto;
		min-height: 420rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 15rpx;
		padding: 15rpx;
		margin-top: 60rpx;
		position: relative;
		border: 10rpx solid #f4f4f5;

		.upload {
			margin-top: 15rpx;
			position: absolute;
			bottom: -34rpx;
		}

		@keyframes xing {
			0% {
				transform: scale(1);
			}

			25% {
				transform: scale(1.2);
			}

			50% {
				transform: scale(1);
			}

			75% {
				transform: scale(1.2);
			}
		}

		.tags {
			position: absolute;
			top: -10rpx;
			right: -10rpx;
			-webkit-animation-name: xing;
			-webkit-animation-timing-function: ease-in-out;
			-webkit-animation-iteration-count: infinite;
			-webkit-animation-duration: 2s;
		}
	}

	.source {
		width: 90%;
		margin: 0 auto;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-top: 15rpx;

		.header {
			background-color: #fff;

			.title {
				padding: 20rpx 0rpx;
				font-weight: bold;
			}
		}

		.lists {
			display: flex;
			flex-direction: row;

			.item {
				width: 180rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: #fff;
				border: 3rpx solid #fff;
				border-radius: 15rpx;
				overflow: hidden;
				padding: 15rpx 0rpx;
				margin-right: 15rpx;

				.title {
					font-size: 24rpx;
					margin: 15rpx 0rpx;
				}
			}

			.active {
				border: 3rpx solid #dd6161;
			}

			.active .title {
				color: #dd6161;
			}
		}
	}
</style>
